/*
*-webkit-:chrome/Safari前缀；
*-moz-:firefox前缀；
*-ms-:IE前缀
*编译后会加上各个浏览器可识别的前缀
*/
@-color-primary: #1F6AFF;
@-color-primary-bg: #F1F6FF;
@-color-primary-border: #D3E2FF;
@-color-white: #FFFFFF;
@-color-black: #000000;
@-color-normal: #333333;
@-color-light: #666666;
@-color-lighter: #999999;
@-color-red: #ff5952;
@-color-green: #00b44c;
@-color-bg-light: #F2F2F2;
@-color-br-light: #D8D8D8;
@-font-size: 16; //基准字体大小
@-font-size-small: 14;
@-font-size-big: 18;

// 背景图片地址和大小
.bimg(@url) {
	background-image: url(@url);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
//放大缩小
.transScale(@scale: 1, @posX: 0, @posY: 0) {
    transform: scale(@scale);
    transform-origin: @posX @posY;
}

//定位元素，左上角
.posLT(@left: 0, @top: 0) {
	position: absolute;
	left: @left; /*no*/
	top: @top; /*no*/
}
//定位元素，左下角
.posLB(@left: 0, @bottom: 0) {
	position: absolute;
	left: @left; /*no*/
	bottom: @bottom; /*no*/
}
//定位元素，右上角
.posRT(@right: 0, @top: 0) {
	position: absolute;
	right: @right; /*no*/
	top: @top; /*no*/
}
//定位元素，右下角
.posRB(@right: 0, @bottom: 0) {
	position: absolute;
	right: @right; /*no*/
	bottom: @bottom; /*no*/
}

//定位上下左右居中
.center {
	position: absolute;
	top: 50%;
	left: 50%;
  transform: translate(-50%, -50%);
}

//定位上下居中,靠左
.vcL(@left: 0) {
	position: absolute;
	left: @left; /*no*/
	top: 50%;
  transform: translate(0, -50%);
}
//定位上下居中，靠右
.vcR(@right: 0) {
	position: absolute;
	right: @right; /*no*/
	top: 50%;
	transform: translate(0, -50%);
}

//定位左右居中,靠上
.hcT(@top: 0) {
	position: absolute;
	top: @top; /*no*/
	left: 50%;
	transform: translate(-50%, 0);
}

//定位左右居中,靠下
.hcB(@bottom: 0) {
	position: absolute;
	bottom: @bottom;/*no*/
	left: 50%;
	transform: translate(-50%, 0);
}

//宽高
.wh(@width, @height) {
	width: @width;
	height: @height;
}

.whPx(@width, @height) {
	width: @width; /*no*/
	height: @height; /*no*/
}

//文字行高度等于行高，即文字上下居中
.lh(@height) {
	height: @height;
	line-height: @height;
}

//字体大小，颜色
.font-dpr(@size) {
	font-size: @size; /*no*/
	[data-dpr='2'] & {
		font-size: @size * 2; /*no*/
	}
	[data-dpr='3'] & {
		font-size: @size * 3; /*no*/
	}
}

.fc(@size, @color) {
	font-size: @size; /*no*/
	color: @color;
}

// 1px自适应
.relative {
	position: relative;
	z-index: 1; // 遇到flex布局，层叠关系会乱
}
.remPxTrans {
	content: '';
	.posLT(0, 0);
	.wh(200%, 200%);
	.transScale(0.5);
	z-index: -1;
}
.rem1px(@lc: @-color-br-light, @radius: 0px, @bwidth: 1px) {
	.relative;
	&::after{
		.remPxTrans;
		border: @bwidth solid @lc; /*no*/
		border-radius: ~"calc(@{radius} + @{radius})"; /*no*/
	}	
}
.rem1pxB(@lc: @-color-br-light, @radius: 0px, @bwidth: 1px) {
	.relative;
	&::after{
		.remPxTrans;
		border-bottom: @bwidth solid @lc; /*no*/
	}	
}
.rem1pxT(@lc: @-color-br-light, @radius: 0px, @bwidth: 1px) {
	.relative;
	&::after{
		.remPxTrans;
		border-top: @bwidth solid @lc; /*no*/
	}
}
.rem1pxL(@lc: @-color-br-light, @radius: 0px, @bwidth: 1px) {
	.relative;
	&::after{
		.remPxTrans;
		border-left: @bwidth solid @lc; /*no*/
	}
}
.rem1pxR(@lc: @-color-br-light, @radius: 0px, @bwidth: 1px){
	.relative;
	&:after{
		.remPxTrans;
		border-right: @bwidth solid @lc; /*no*/
	}
}
//link箭头样式
.rArrow {
	content: '';
	display: inline-block;
	.whPx(6px, 6px);
	border-width: 2px 2px 0 0; /*no*/
	border-style: solid;
	.vcR(-8px);
	transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	margin-top: -3px; /*no*/
}
.arrowLink(@bColor: @-color-primary) {
	.relative;
	&::before{
		.rArrow;
		border-color: @bColor;
	}
}
//对勾
.gou(@bColor: #fff, @width: 6px, @height: 12px, @bWidth: 1px) {
	content: '';  
	border-style: solid;
	border-top: none;
	border-left: none;
	.vcL();
	transform: matrix(0.71, 0.71, -0.71, 0.71, -2.5, -7.5);
	.whPx(@width, @height);
	border-width: @bWidth; /*no*/
	border-color: @bColor;
}
//flex 布局和 子元素 对其方式
.flex(@type: space-between, @alignItems: stretch) {
	display: flex;
	justify-content: @type;
	align-items: @alignItems;
}